<template>
  <div class="note-label" :style="{ backgroundColor: bgColor, color: textColor }">
    {{ label.labelName }}
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { NoteLabel } from '@/types/api'

interface Props {
  label: NoteLabel
}

const props = defineProps<Props>()

// 计算背景色和文字颜色
const bgColor = computed(() => props.label.color || '#409EFF')
const textColor = computed(() => {
  // 简单的颜色亮度计算，决定文字使用白色还是黑色
  const color = props.label.color || '#409EFF'
  // 移除 # 号并转换为RGB值
  const hex = color.replace('#', '')
  const r = parseInt(hex.substring(0, 2), 16)
  const g = parseInt(hex.substring(2, 4), 16)
  const b = parseInt(hex.substring(4, 6), 16)
  // 计算亮度
  const brightness = (r * 299 + g * 587 + b * 114) / 1000
  return brightness > 128 ? '#333333' : '#ffffff'
})
</script>

<style scoped>
.note-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.note-label:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
</style>